根據表達式的真假來決定是否渲染或顯示特定內容
要控制元素的顯示隱藏或狀態改變、頁面上迭代數組或對象數據,我們來看看如何使用v-if、v-else、v-for來實現
<template>
  <div>
    <div class="header">
      <div class="open">
        <span
          v-if="!isCollapse"
          class="iconfont el-icon-arrow-left"
          @click="changeMenu"
        ></span>
        <span
          v-else
          class="iconfont el-icon-arrow-right"
          @click="changeMenu"
        ></span>
      </div>
    </div>
  </div>
</template>
在上面範例中,v-if和v-else用於切換一個元素的內容,根據isCollapse變量的值來決定顯示不同的圖標。